<template>
  <view>
    <view class="content">
      <view class="row b-b">
        <text class="tit">姓名</text>
        <input class="input" type="text" v-model="addressData.name" placeholder="请输入姓名"
          placeholder-class="placeholder" />
      </view>
      <view class="row b-b">
        <text class="tit">性别</text>
        <input class="input" type="text" v-model="addressData.sex" placeholder="请输入性别"
          placeholder-class="placeholder" />
      </view>
      <view class="row b-b">
        <text class="tit">手机号</text>
        <input class="input" type="number" v-model="addressData.phone" placeholder="请输入手机号码"
          placeholder-class="placeholder" />
      </view>
      <view class="row b-b">
        <text class="tit">密码</text>
        <input class="input" type="text" v-model="addressData.password" placeholder="请输入密码"
          placeholder-class="placeholder" />
      </view>

      <button class="add-btn" @click="confirm()">提交</button>
    </view>
    <view class="uniappDemo">
      <!-- 弹框内容 -->
      <view class="uniappBox">
        <view :hidden="!uniappShowModel" class="uniappContant">
          <view class="uniappTitle">提示</view>
          <view class="uniappNotice">信息修改成功！</view>
          <!-- 确定取消按钮 -->
          <view class="uniappBtn">
            <!-- <view @tap="uniappShowModel = false">取消</view> -->
            <view @tap="confirm1()">确定</view>
          </view>
        </view>
        <!-- 背景黑色蒙版 -->
        <view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
      </view>
    </view>
    <view class="uniappDemo">
      <view class="uniappBox">
        <view :hidden="!uniappShowModel2" class="uniappContant">
          <view class="uniappTitle">提示</view>
          <view class="uniappNotice">输入信息不完整！</view>
          <view class="uniappBtn2" @tap="confirm2()">确定</view>
        </view>
        <view class="uniappBgdCol" :hidden="!uniappShowModel2" @tap="uniappShowModel2 = false"></view>
      </view>
    </view>
    <view class="uniappDemo">
      <view class="uniappBox">
        <view :hidden="!uniappShowModel3" class="uniappContant">
          <view class="uniappTitle">提示</view>
          <view class="uniappNotice">输入的性别只能为"男"或"女"！</view>
          <view class="uniappBtn2" @tap="confirm3()">确定</view>
        </view>
        <view class="uniappBgdCol" :hidden="!uniappShowModel3" @tap="uniappShowModel3 = false"></view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {

    data() {
      return {
        id: '',
        uniappShowModel: false, //默认不显示
        uniappShowModel2: false, //默认不显示
        uniappShowModel3: false, //默认不显示
        addressData: {
          name: '',
          phone: '',
          sex: '',
          password: '',
        }
      }
    },
    onLoad(option) {
      this.id = store.state.business.B_ID
      this.addressData.name = store.state.business.B_Name
      this.addressData.phone = store.state.business.B_Phone
      this.addressData.sex = store.state.business.B_Sex
      this.addressData.password = store.state.business.B_Password
    },
    methods: {
      // 点击确定按钮模态框消失
      confirm1() {
        this.uniappShowModel = false
        let data = this.addressData
        console.log(JSON.stringify(data))
        // this.uniappShowModel2=true
      },
      confirm2() {
        this.uniappShowModel2 = false
      },
      confirm3() {
        this.uniappShowModel3 = false
      },
      //提交
      confirm() {
        if (this.addressData.name === '' || this.addressData.phone === '' || this.addressData.sex === '' || this
          .addressData.password === '') {
          this.uniappShowModel2 = true
        } else if (this.addressData.sex !== '男' && this.addressData.sex !== '女') {
          this.uniappShowModel3 = true
        } else {
          this.updatebusinessman()
          this.uniappShowModel = true
        }
      },
      async updatebusinessman() {
        let _this = this
        const { data: res } = uni.request({
          url: 'http://127.0.0.1:3007/api/updateBusinByself',
          method: 'post',
          data: {
            name: this.addressData.name,
            password: this.addressData.password,
            sex: this.addressData.sex,
            phone: this.addressData.phone,
            id: this.id,
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
          success: res => {
            console.log(res.data)
            this.setMessage()
          }
        })
      },
      // 重新存储信息到vuex中
      async setMessage() {
        const { data: res } = await uni.request({
          url: 'http://localhost:3007/api/loginBusin',
          method: 'POST',
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },
          data: {
            name: this.addressData.name,
            password: this.addressData.password,
          },
        })
        if (res.status === 0) {
          store.commit('loginBusiness', res.data.businessman)
        } else {
          console.log(res)
        }
      }
    },

  }
</script>

<style lang="scss">
  page {
    padding-top: 16upx;
  }

  .row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 30upx;
    height: 110upx;
    background: #fff;

    .tit {
      flex-shrink: 0;
      width: 120upx;
      font-size: 30upx;

    }

    .input {
      flex: 1;
      font-size: 30upx;

    }

    .icon-shouhuodizhi {
      font-size: 36upx;

    }
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 80upx;
    margin: 60upx auto;
    background-color: rgb(28, 42, 134);
    color: #fff;

    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
  }

  .uniappBgdCol {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: .6;
    filter: alpha(opacity=88);
  }

  .uniappContant {
    position: fixed;
    top: 36%;
    left: 50%;
    width: 80%;
    margin-left: -40%;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  .uniappTitle {
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #161303;
    font-size: 28rpx;
    padding: 20rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    ;
  }

  .uniappNotice {
    font-size: 28rpx;
    color: #121212;
    display: flex;
    justify-content: center;
    padding: 40rpx 0rpx;
  }

  .uniappBtn {
    display: flex;
    justify-content: space-between;
  }

  .uniappBtn2 {
    text-align: center;
    background-color: rgb(254, 209, 10);
    border: 1px solid white;
    border-radius: 0rpx 0rpx 0rpx 10rpx;
    margin-top: 2px;
    height: 30px;
    padding-top: 5px;
  }

  .uniappBtn view {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4% 0%;
    font-size: 28rpx;
  }

  .uniappBtn view:first-child {
    background-color: rgb(254, 250, 230);
    border-radius: 0rpx 0rpx 0rpx 10rpx;
  }

  .uniappBtn view:last-child {
    background-color: rgb(254, 209, 10);
    border-radius: 0rpx 0rpx 10rpx 0rpx;
  }
</style>